<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>注册学生账号</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/js/jquery-3.5.1.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
</head>
<body>

<script>
    function dosubmit(){
            //获取表单提交按钮
            var btnSubmit = document.getElementById("submit");
            //将表单提交按钮设置为不可用，这样就可以避免用户再次点击提交按钮
           btnSubmit.disabled= "disabled";
            //返回true让表单可以正常提交
           return true;
        }
//验证账号格式是否正确
    function a1(){
var regu=/^\d{6,}$/;
var id = $("#checksno").val();

if (regu.test(id))
{
    $("#tips").html("√").css("color","green");
}else{
    $("#tips").html("账号必须是6位以上数字").css("color","red");
    $("#checksno").val("");

}
    }

//验证账号格式是否重复
    function a2(){
    $.get({
            url:"${pageContext.request.contextPath}/student/registerCheck",
            data:{  "sno":$("#checksno").val()},
                success:function (data) {
                console.log(data.toString());
                if(data=="exit"){
                    $("#tips").html("用户名已存在").css("color","red");
                    $("#checksno").val("");
                }else {
                    $("#tips").html(" ").css("color","red");
                }
            }

        }
    )
}
//验证姓名格式是否正确
function a3(){
    var regu=/^[\u4e00-\u9fa5]{2,10}$/;
    var id2 = $("#checksname").val();

    if (regu.test(id2))
    {
        $("#tips2").html("√").css("color","green");
    }else{
        $("#tips2").html("姓名必须是中文1~10个字内").css("color","red");
        $("#checksname").val("");

    }
}
//判断密码输入是否正确
function a4(){
    var regu=/^.{6,20}$/;
    var id3 = $("#checkspassword").val();

    if (regu.test(id3))
    {
        $("#tips3").html("√").css("color","green");
    }else{
        $("#tips3").html("密码必须6个字符以上").css("color","red");
        $("#checkspassword").val("");

    }
}

</script>

<div class="container">

    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="page-header">
                <h1>
                    <small>注册学生账号</small>
                </h1>
            </div>
        </div>
    </div>

    <form action="${pageContext.request.contextPath}/student/addStudent" >
        <div class="form-group" >
            <label>输入学号：</label>
            <input required="required" type="text" id="checksno" name="sno" class="form-control" onblur="a1()" onblur="a2()" ><p style="color: red;font-size: 1px;" id="tips"></p>
        </div>
        <div class="form-group" >
            <label >姓名：</label>
            <input required="required" type="text"id="checksname" name="sname" class="form-control"  onblur="a3()"><p style="color: red;font-size: 1px;" id="tips2"></p>
        </div>
        <div class="form-group">
            <label >密码：</label>
            <input required="required" type="password" id="checkspassword" name="spassword" class="form-control"  onblur="a4()"><p style="color: red;font-size: 1px;" id="tips3"></p>
        </div>
        <div class="form-group">
            <label >班级：</label>
            <input required="required" type="text" id="checksclass" name="sclass" list="typelist" class="form-control" >
            <datalist id="typelist">
                　　<option>一年（1）班</option>
                　　<option>一年（2）班</option>
                　　<option>一年（3）班</option>
                　　<option>二年（1）班</option>
                　　<option>二年（2）班</option>
                　　<option>二年（3）班</option>
                　　<option>三年（1）班</option>
                　　<option>三年（2）班</option>
                　　<option>三年（3）班</option>
                　　<option>四年（1）班</option>
                　　<option>四年（2）班</option>
                　　<option>四年（3）班</option>
                　　<option>五年（1）班</option>
                　　<option>五年（2）班</option>
                　　<option>五年（3）班</option>
                　　<option>六年（1）班</option>
                　　<option>六年（2）班</option>
                　　<option>六年（3）班</option>
                　　
            </datalist>

        </div>
        <div class="form-group" >

            <input id="submit" type="submit" class="form-control" value="注册"   onmousedown="a2()">
        </div>
    </form>

</div>
